import { Button, Checkbox, Container, Group, Pagination, Table, Modal, Text, TextInput, NumberInput } from "@mantine/core";
import { useEffect, useState } from "react";
import axios from "axios";
import { notifications } from '@mantine/notifications';
import { modals } from '@mantine/modals';

interface Earphone {
    id: number;
    url: string;
    earphone_name: string;
    earphone_brand: string;
    earphone_price: number;
    product_type: string;
    usage_scenario: string;
    connection_type: string;
    wearing_style: string;
    driver_unit: string;
    noise_reduction: string;
    battery_life: string;
}

function EarphonePage() {
    const [selectedRows, setSelectedRows] = useState<number[]>([]);
    const [earphoneList, setEarphoneList] = useState<Earphone[]>([]);
    const [pageInfo, setPageInfo] = useState<any>();
    const [detailsModalOpen, setDetailsModalOpen] = useState(false);
    const [currentEarphone, setCurrentEarphone] = useState<any>(null);
    const [editModalOpen, setEditModalOpen] = useState(false);
    const [editingEarphone, setEditingEarphone] = useState<any>(null);
    const [createModalOpen, setCreateModalOpen] = useState(false);
    const [newEarphone, setNewEarphone] = useState<any>({
        earphone_name: '',
        earphone_brand: '',
        earphone_price: 0,
        product_type: '',
        usage_scenario: '',
        connection_type: '',
        wearing_style: '',
        driver_unit: '',
        frequency_response: '',
        interface: '',
        noise_reduction: '',
        waterproof: '',
        bluetooth_version: '',
        bluetooth_features: '',
        microphone_info: '',
        battery_type: '',
        battery_capacity: '',
        charging_time: '',
        battery_life: '',
        colors: '',
        dimensions: '',
        weight: '',
        special_features: '',
        other_features: '',
        package_contents: ''
    });

    useEffect(() => {
        getEarphoneInfo({ page: 1, per_page: 10 })
    }, [])

    const getEarphoneInfo = (condition: any) => {
        axios.get("/app-api/get-earphones", { params: condition }).then((res) => {
            setEarphoneList(res.data.earphones)
            setPageInfo(res.data.pagination)
        })
    }

    const handleViewDetails = (earphone: any) => {
        setCurrentEarphone(earphone);
        setDetailsModalOpen(true);
    };

    const handleEdit = (earphone: any) => {
        setEditingEarphone({
            id: earphone.id,
            earphone_name: earphone.earphone_name,
            earphone_brand: earphone.earphone_brand,
            earphone_price: earphone.earphone_price,
            product_type: earphone.product_type,
            usage_scenario: earphone.usage_scenario,
            connection_type: earphone.connection_type,
            wearing_style: earphone.wearing_style,
            driver_unit: earphone.driver_unit,
            noise_reduction: earphone.noise_reduction,
            battery_life: earphone.battery_life
        });
        setEditModalOpen(true);
    };

    const handleSaveEdit = () => {
        axios.put(`/app-api/update-earphone/${editingEarphone.id}`, editingEarphone)
            .then(() => {
                setEarphoneList(earphoneList.map((earphone: any) =>
                    earphone.id === editingEarphone.id ? editingEarphone : earphone
                ));
                setEditModalOpen(false);
                notifications.show({
                    title: '修改成功',
                    message: '记录已成功更新',
                    color: 'green',
                });
            })
            .catch((error) => {
                notifications.show({
                    title: '修改失败',
                    message: '更新记录时发生错误',
                    color: 'red',
                });
            });
    };

    const handleDelete = (earphoneId: number) => {
        modals.openConfirmModal({
            title: '确认删除',
            centered: true,
            children: (
                <Text size="sm">
                    您确定要删除这条记录吗？此操作不可撤销。
                </Text>
            ),
            labels: { confirm: '确认删除', cancel: '取消' },
            confirmProps: { color: 'red' },
            cancelProps: { color: 'gray' },
            onConfirm: () => {
                axios.delete(`/app-api/delete-earphone/${earphoneId}`).then(() => {
                    setEarphoneList(earphoneList.filter((earphone: any) => earphone.id !== earphoneId));
                    notifications.show({
                        title: '删除成功',
                        message: '记录已成功删除',
                        color: 'green',
                    });
                });
            },
        });
    };

    const rows = earphoneList.map((element: any) => (
        <Table.Tr
            key={element.id}
            bg={selectedRows.includes(element.id) ? 'var(--mantine-color-blue-light)' : undefined}
        >
            <Table.Td>{element.earphone_name}</Table.Td>
            <Table.Td>{element.earphone_brand}</Table.Td>
            <Table.Td>{element.earphone_price}</Table.Td>
            {/* <Table.Td>{element.product_type}</Table.Td> */}
            <Table.Td>{element.usage_scenario}</Table.Td>
            <Table.Td>{element.connection_type}</Table.Td>
            <Table.Td>{element.wearing_style}</Table.Td>
            <Table.Td>{element.driver_unit}</Table.Td>
            <Table.Td>{element.noise_reduction}</Table.Td>
            <Table.Td>{element.battery_life}</Table.Td>
            <Table.Td>
                <Group gap={4} className="w-full flex justify-center items-center">
                    <Button size={'xs'} color={'green'} onClick={() => handleViewDetails(element)}>详情</Button>
                    {(localStorage.getItem('user_role') as string) == '0' && <Button size={'xs'} onClick={() => handleEdit(element)}>编辑</Button>}
                    {(localStorage.getItem('user_role') as string) == '0' && <Button size={'xs'} color={'red'} onClick={() => handleDelete(element.id)}>删除</Button>}
                </Group>
            </Table.Td>
        </Table.Tr>
    ));
    const handleCreateEarphone = () => {
        axios.post('/app-api/create-earphone', newEarphone)
            .then(() => {
                getEarphoneInfo({ page: 1, per_page: 10 });
                setCreateModalOpen(false);
                setNewEarphone({
                    earphone_name: '',
                    earphone_brand: '',
                    earphone_price: 0,
                    product_type: '',
                    usage_scenario: '',
                    connection_type: '',
                    wearing_style: '',
                    driver_unit: '',
                    frequency_response: '',
                    interface: '',
                    noise_reduction: '',
                    waterproof: '',
                    bluetooth_version: '',
                    bluetooth_features: '',
                    microphone_info: '',
                    battery_type: '',
                    battery_capacity: '',
                    charging_time: '',
                    battery_life: '',
                    colors: '',
                    dimensions: '',
                    weight: '',
                    special_features: '',
                    other_features: '',
                    package_contents: ''
                });
                notifications.show({
                    title: '创建成功',
                    message: '新耳机记录已成功创建',
                    color: 'green',
                });
            })
            .catch((error) => {
                notifications.show({
                    title: '创建失败',
                    message: '创建耳机记录时发生错误',
                    color: 'red',
                });
            });
    };
    return (
        <div className={'mx-[unset]'}>
            <div className={'py-[10px]'}>
                <Table.ScrollContainer minWidth={500}>
                    <Table withTableBorder withColumnBorders stickyHeader>
                        <Table.Thead>
                            <Table.Tr>
                                <Table.Th>名称</Table.Th>
                                <Table.Th>品牌</Table.Th>
                                <Table.Th>价格</Table.Th>
                                <Table.Th>使用场景</Table.Th>
                                <Table.Th>连接方式</Table.Th>
                                <Table.Th>佩戴方式</Table.Th>
                                <Table.Th>驱动单元</Table.Th>
                                <Table.Th>降噪功能</Table.Th>
                                <Table.Th>续航时间</Table.Th>
                                <Table.Th className="w-[200px]">操作</Table.Th>
                            </Table.Tr>
                        </Table.Thead>
                        <Table.Tbody>{rows}</Table.Tbody>
                    </Table>
                </Table.ScrollContainer>
            </div>
            <div className={'py-[10px]'}>
                {pageInfo && (
                    <Pagination
                        total={pageInfo.pages as any}
                        onPreviousPage={() => {
                            if (pageInfo.has_prev) {
                                getEarphoneInfo({ page: pageInfo.prev_num, per_page: pageInfo.per_page })
                            }
                        }}
                        onNextPage={() => {
                            if (pageInfo.has_next) {
                                getEarphoneInfo({ page: pageInfo.next_num, per_page: pageInfo.per_page })
                            }
                        }}
                        onChange={(page: number) => {
                            getEarphoneInfo({ page: page, per_page: pageInfo.per_page })
                        }}
                    />
                )}
            </div>

            <Modal
                opened={createModalOpen}
                onClose={() => setCreateModalOpen(false)}
                title="新建耳机信息"
                size="lg"
            >
                <div className="space-y-4">
                    <TextInput
                        label="型号"
                        value={newEarphone.earphone_name}
                        onChange={(e) => setNewEarphone({ ...newEarphone, earphone_name: e.target.value })}
                    />
                    <TextInput
                        label="品牌"
                        value={newEarphone.earphone_brand}
                        onChange={(e) => setNewEarphone({ ...newEarphone, earphone_brand: e.target.value })}
                    />
                    <NumberInput
                        label="价格"
                        value={newEarphone.earphone_price}
                        onChange={(value) => setNewEarphone({ ...newEarphone, earphone_price: value })}
                    />
                    <TextInput
                        label="产品定位"
                        value={newEarphone.product_type}
                        onChange={(e) => setNewEarphone({ ...newEarphone, product_type: e.target.value })}
                    />
                    <TextInput
                        label="使用场景"
                        value={newEarphone.usage_scenario}
                        onChange={(e) => setNewEarphone({ ...newEarphone, usage_scenario: e.target.value })}
                    />
                    <TextInput
                        label="连接方式"
                        value={newEarphone.connection_type}
                        onChange={(e) => setNewEarphone({ ...newEarphone, connection_type: e.target.value })}
                    />
                    <TextInput
                        label="佩戴方式"
                        value={newEarphone.wearing_style}
                        onChange={(e) => setNewEarphone({ ...newEarphone, wearing_style: e.target.value })}
                    />
                    <TextInput
                        label="驱动单元"
                        value={newEarphone.driver_unit}
                        onChange={(e) => setNewEarphone({ ...newEarphone, driver_unit: e.target.value })}
                    />
                    <TextInput
                        label="频响范围"
                        value={newEarphone.frequency_response}
                        onChange={(e) => setNewEarphone({ ...newEarphone, frequency_response: e.target.value })}
                    />
                    <TextInput
                        label="接口"
                        value={newEarphone.interface}
                        onChange={(e) => setNewEarphone({ ...newEarphone, interface: e.target.value })}
                    />
                    <TextInput
                        label="降噪功能"
                        value={newEarphone.noise_reduction}
                        onChange={(e) => setNewEarphone({ ...newEarphone, noise_reduction: e.target.value })}
                    />
                    <TextInput
                        label="防水防尘"
                        value={newEarphone.waterproof}
                        onChange={(e) => setNewEarphone({ ...newEarphone, waterproof: e.target.value })}
                    />
                    <TextInput
                        label="蓝牙版本"
                        value={newEarphone.bluetooth_version}
                        onChange={(e) => setNewEarphone({ ...newEarphone, bluetooth_version: e.target.value })}
                    />
                    <TextInput
                        label="蓝牙功能"
                        value={newEarphone.bluetooth_features}
                        onChange={(e) => setNewEarphone({ ...newEarphone, bluetooth_features: e.target.value })}
                    />
                    <TextInput
                        label="麦克风信息"
                        value={newEarphone.microphone_info}
                        onChange={(e) => setNewEarphone({ ...newEarphone, microphone_info: e.target.value })}
                    />
                    <TextInput
                        label="电池类型"
                        value={newEarphone.battery_type}
                        onChange={(e) => setNewEarphone({ ...newEarphone, battery_type: e.target.value })}
                    />
                    <TextInput
                        label="电池容量"
                        value={newEarphone.battery_capacity}
                        onChange={(e) => setNewEarphone({ ...newEarphone, battery_capacity: e.target.value })}
                    />
                    <TextInput
                        label="充电时间"
                        value={newEarphone.charging_time}
                        onChange={(e) => setNewEarphone({ ...newEarphone, charging_time: e.target.value })}
                    />
                    <TextInput
                        label="续航时间"
                        value={newEarphone.battery_life}
                        onChange={(e) => setNewEarphone({ ...newEarphone, battery_life: e.target.value })}
                    />
                    <TextInput
                        label="产品颜色"
                        value={newEarphone.colors}
                        onChange={(e) => setNewEarphone({ ...newEarphone, colors: e.target.value })}
                    />
                    <TextInput
                        label="外形尺寸"
                        value={newEarphone.dimensions}
                        onChange={(e) => setNewEarphone({ ...newEarphone, dimensions: e.target.value })}
                    />
                    <TextInput
                        label="产品重量"
                        value={newEarphone.weight}
                        onChange={(e) => setNewEarphone({ ...newEarphone, weight: e.target.value })}
                    />
                    <TextInput
                        label="其他特点"
                        value={newEarphone.special_features}
                        onChange={(e) => setNewEarphone({ ...newEarphone, special_features: e.target.value })}
                    />
                    <TextInput
                        label="其他性能"
                        value={newEarphone.other_features}
                        onChange={(e) => setNewEarphone({ ...newEarphone, other_features: e.target.value })}
                    />
                    <TextInput
                        label="包装清单"
                        value={newEarphone.package_contents}
                        onChange={(e) => setNewEarphone({ ...newEarphone, package_contents: e.target.value })}
                    />

                    <Group justify="flex-end" mt="md">
                        <Button onClick={() => setCreateModalOpen(false)} variant="outline">取消</Button>
                        <Button onClick={handleCreateEarphone}>确认</Button>
                    </Group>
                </div>
            </Modal>
            <Modal
                opened={detailsModalOpen}
                onClose={() => setDetailsModalOpen(false)}
                title="耳机详情"
                size="lg"
            >
                {currentEarphone && (
                    <div className="space-y-4">
                        <Text><strong>型号：</strong>{currentEarphone.earphone_name}</Text>
                        <Text><strong>品牌：</strong>{currentEarphone.earphone_brand}</Text>
                        <Text><strong>价格：</strong>{currentEarphone.earphone_price}</Text>
                        <Text><strong>产品定位：</strong>{currentEarphone.product_type}</Text>
                        <Text><strong>使用场景：</strong>{currentEarphone.usage_scenario}</Text>
                        <Text><strong>连接方式：</strong>{currentEarphone.connection_type}</Text>
                        <Text><strong>佩戴方式：</strong>{currentEarphone.wearing_style}</Text>
                        <Text><strong>驱动单元：</strong>{currentEarphone.driver_unit}</Text>
                        <Text><strong>频响范围：</strong>{currentEarphone.frequency_response}</Text>
                        <Text><strong>接口：</strong>{currentEarphone.interface}</Text>
                        <Text><strong>降噪功能：</strong>{currentEarphone.noise_reduction}</Text>
                        <Text><strong>防水防尘：</strong>{currentEarphone.waterproof}</Text>
                        <Text><strong>蓝牙版本：</strong>{currentEarphone.bluetooth_version}</Text>
                        <Text><strong>蓝牙功能：</strong>{currentEarphone.bluetooth_features}</Text>
                        <Text><strong>麦克风信息：</strong>{currentEarphone.microphone_info}</Text>
                        <Text><strong>电池类型：</strong>{currentEarphone.battery_type}</Text>
                        <Text><strong>电池容量：</strong>{currentEarphone.battery_capacity}</Text>
                        <Text><strong>充电时间：</strong>{currentEarphone.charging_time}</Text>
                        <Text><strong>续航时间：</strong>{currentEarphone.battery_life}</Text>
                        <Text><strong>产品颜色：</strong>{currentEarphone.colors}</Text>
                        <Text><strong>外形尺寸：</strong>{currentEarphone.dimensions}</Text>
                        <Text><strong>产品重量：</strong>{currentEarphone.weight}</Text>
                        <Text><strong>其他特点：</strong>{currentEarphone.special_features}</Text>
                        <Text><strong>其他性能：</strong>{currentEarphone.other_features}</Text>
                        <Text><strong>包装清单：</strong>{currentEarphone.package_contents}</Text>
                    </div>
                )}
            </Modal>

            <Modal
                opened={editModalOpen}
                onClose={() => setEditModalOpen(false)}
                title="修改耳机信息"
                size="lg"
            >
                {editingEarphone && (
                    <div className="space-y-4">
                        <TextInput
                            label="型号"
                            value={editingEarphone.earphone_name}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, earphone_name: e.target.value })}
                        />
                        <TextInput
                            label="品牌"
                            value={editingEarphone.earphone_brand}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, earphone_brand: e.target.value })}
                        />
                        <NumberInput
                            label="价格"
                            value={editingEarphone.earphone_price}
                            onChange={(value) => setEditingEarphone({ ...editingEarphone, earphone_price: value })}
                        />
                        <TextInput
                            label="产品定位"
                            value={editingEarphone.product_type}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, product_type: e.target.value })}
                        />
                        <TextInput
                            label="使用场景"
                            value={editingEarphone.usage_scenario}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, usage_scenario: e.target.value })}
                        />
                        <TextInput
                            label="连接方式"
                            value={editingEarphone.connection_type}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, connection_type: e.target.value })}
                        />
                        <TextInput
                            label="佩戴方式"
                            value={editingEarphone.wearing_style}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, wearing_style: e.target.value })}
                        />
                        <TextInput
                            label="驱动单元"
                            value={editingEarphone.driver_unit}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, driver_unit: e.target.value })}
                        />
                        <TextInput
                            label="频响范围"
                            value={editingEarphone.frequency_response}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, frequency_response: e.target.value })}
                        />
                        <TextInput
                            label="接口"
                            value={editingEarphone.interface}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, interface: e.target.value })}
                        />
                        <TextInput
                            label="降噪功能"
                            value={editingEarphone.noise_reduction}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, noise_reduction: e.target.value })}
                        />
                        <TextInput
                            label="防水防尘"
                            value={editingEarphone.waterproof}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, waterproof: e.target.value })}
                        />
                        <TextInput
                            label="蓝牙版本"
                            value={editingEarphone.bluetooth_version}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, bluetooth_version: e.target.value })}
                        />
                        <TextInput
                            label="蓝牙功能"
                            value={editingEarphone.bluetooth_features}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, bluetooth_features: e.target.value })}
                        />
                        <TextInput
                            label="麦克风信息"
                            value={editingEarphone.microphone_info}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, microphone_info: e.target.value })}
                        />
                        <TextInput
                            label="电池类型"
                            value={editingEarphone.battery_type}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, battery_type: e.target.value })}
                        />
                        <TextInput
                            label="电池容量"
                            value={editingEarphone.battery_capacity}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, battery_capacity: e.target.value })}
                        />
                        <TextInput
                            label="充电时间"
                            value={editingEarphone.charging_time}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, charging_time: e.target.value })}
                        />
                        <TextInput
                            label="续航时间"
                            value={editingEarphone.battery_life}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, battery_life: e.target.value })}
                        />
                        <TextInput
                            label="产品颜色"
                            value={editingEarphone.colors}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, colors: e.target.value })}
                        />
                        <TextInput
                            label="外形尺寸"
                            value={editingEarphone.dimensions}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, dimensions: e.target.value })}
                        />
                        <TextInput
                            label="产品重量"
                            value={editingEarphone.weight}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, weight: e.target.value })}
                        />
                        <TextInput
                            label="其他特点"
                            value={editingEarphone.special_features}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, special_features: e.target.value })}
                        />
                        <TextInput
                            label="其他性能"
                            value={editingEarphone.other_features}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, other_features: e.target.value })}
                        />
                        <TextInput
                            label="包装清单"
                            value={editingEarphone.package_contents}
                            onChange={(e) => setEditingEarphone({ ...editingEarphone, package_contents: e.target.value })}
                        />
                        <Group justify="flex-end" mt="md">
                            <Button onClick={() => setEditModalOpen(false)} variant="outline">取消</Button>
                            <Button onClick={handleSaveEdit}>保存</Button>
                        </Group>
                    </div>
                )}
            </Modal>
        </div>
    );
}

const EarphoneChatTable = (props: { earphones: Earphone[] }) => {
    const { earphones } = props;
    const [detailsModalOpen, setDetailsModalOpen] = useState(false);
    const [currentEarphone, setCurrentEarphone] = useState<any | null>(null);

    const handleDetailsClick = (earphone: any) => {
        setCurrentEarphone(earphone);
        setDetailsModalOpen(true);
    };
    return (
        <>
            <Modal
                opened={detailsModalOpen}
                onClose={() => setDetailsModalOpen(false)}
                title="耳机详情"
                size="lg"
            >
                {currentEarphone && (
                    <div className="space-y-4">
                        <Text><strong>型号：</strong>{currentEarphone.earphone_name}</Text>
                        <Text><strong>品牌：</strong>{currentEarphone.earphone_brand}</Text>
                        <Text><strong>价格：</strong>{currentEarphone.earphone_price}￥</Text>
                        <Text><strong>产品定位：</strong>{currentEarphone.product_type}</Text>
                        <Text><strong>使用场景：</strong>{currentEarphone.usage_scenario}</Text>
                        <Text><strong>连接方式：</strong>{currentEarphone.connection_type}</Text>
                        <Text><strong>佩戴方式：</strong>{currentEarphone.wearing_style}</Text>
                        <Text><strong>驱动单元：</strong>{currentEarphone.driver_unit}</Text>
                        <Text><strong>频响范围：</strong>{currentEarphone.frequency_response}</Text>
                        <Text><strong>接口：</strong>{currentEarphone.interface}</Text>
                        <Text><strong>降噪功能：</strong>{currentEarphone.noise_reduction}</Text>
                        <Text><strong>防水防尘：</strong>{currentEarphone.waterproof}</Text>
                        <Text><strong>蓝牙版本：</strong>{currentEarphone.bluetooth_version}</Text>
                        <Text><strong>蓝牙功能：</strong>{currentEarphone.bluetooth_features}</Text>
                        <Text><strong>麦克风信息：</strong>{currentEarphone.microphone_info}</Text>
                        <Text><strong>电池类型：</strong>{currentEarphone.battery_type}</Text>
                        <Text><strong>电池容量：</strong>{currentEarphone.battery_capacity}</Text>
                        <Text><strong>充电时间：</strong>{currentEarphone.charging_time}</Text>
                        <Text><strong>续航时间：</strong>{currentEarphone.battery_life}</Text>
                        <Text><strong>产品颜色：</strong>{currentEarphone.colors}</Text>
                        <Text><strong>外形尺寸：</strong>{currentEarphone.dimensions}</Text>
                        <Text><strong>产品重量：</strong>{currentEarphone.weight}</Text>
                        <Text><strong>其他特点：</strong>{currentEarphone.special_features}</Text>
                        <Text><strong>其他性能：</strong>{currentEarphone.other_features}</Text>
                        <Text><strong>包装清单：</strong>{currentEarphone.package_contents}</Text>
                    </div>
                )}
            </Modal>
            <Table verticalSpacing="xs" highlightOnHover striped withColumnBorders
                styles={{
                    thead: {
                        '& tr': {
                            backgroundColor: '#007bff',
                            color: 'white'
                        },
                        '& th': {
                            borderBottom: '2px solid #e0e0e0'
                        }
                    },
                    tbody: {
                        '& tr': {
                            '&:nth-of-type(even)': {
                                backgroundColor: '#f8f9fa'
                            },
                            '&:hover': {
                                backgroundColor: '#e9ecef'
                            }
                        }
                    },
                    td: {
                        border: '1px solid #f0f0f0'
                    }
                }}>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>名称</Table.Th>
                        <Table.Th>品牌</Table.Th>
                        <Table.Th>型号</Table.Th>
                        <Table.Th>价格</Table.Th>
                        <Table.Th>操作</Table.Th>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    {earphones.map((earphone, index) => {
                        return (
                            <Table.Tr key={earphone.id}>
                                <Table.Td>{earphone.earphone_name}</Table.Td>
                                <Table.Td>{earphone.earphone_brand}</Table.Td>
                                <Table.Td>{earphone.product_type}</Table.Td>
                                <Table.Td>{earphone.earphone_price}￥</Table.Td>
                                <Table.Td>
                                    <Group>
                                        <Button onClick={() => handleDetailsClick(earphone)}>详情</Button>
                                        <Button color="green" onClick={() => { window.open(earphone.url, '_blank') }}>网站</Button>
                                    </Group>
                                </Table.Td>
                            </Table.Tr>
                        )
                    })}
                </Table.Tbody>
            </Table>
        </>
    )
}

export { EarphonePage, EarphoneChatTable };